<template>
  <div class="market-wrapper">
    <!--    当日统计有10分钟的延迟-->
    <Alert show-icon>{{this.$t('m.drty')}}</Alert>
    <div class="screen-area">
      <!--      渠道名称-->

      <div class="items">
        <div class="label">{{$t('m.rLstate')}}</div>
        <Input class="iv-input" v-model="name" :placeholder="$t('m.rLstate')" />
      </div>
      <!--        选择日期-->
      <div class="items">
        <div class="label">{{$t('m.pst')}}</div>
        <DatePicker class="iv-input" type="daterange" :value="pickerValue" :placeholder="$t('m.pst')" format="yyyy-MM-dd" @on-change="handlePicker"></DatePicker>
      </div>
      <div class="items">
        <div class="label">{{$t('m.shàngjiàzhuàngtài')}}</div>
        <Select v-model="status" :placeholder="$t('m.shàngjiàzhuàngtài')" class="iv-input">
          <Option :value="''">{{$t('m.entire')}}</Option>
          <Option :value="1">{{this.$t('m.AlOn')}}</Option>
          <Option :value="0">{{this.$t('m.AlOff')}}</Option>
        </Select>
      </div>

      <div style="margin-top:20px;">
        <Button class="parameter_button" style="margin-right:30px;" @click="emptyQueryInfo">{{$t('m.recycle')}}</Button>
        <Button class="parameter_button" type="primary" @click="getStatisticsList">{{$t('m.cháxún')}}</Button>
      </div>

    </div>

    <div class="market-main">
      <Table border :columns="columns" :data="list" :loading="loading"></Table>

      <Page :total="total" :current.sync="page" :page-size-opts="[1, 20, 40, 80, 100]" show-total show-elevator show-sizer @on-change="pageChange" @on-page-size-change="handleSizeChange" style="margin: 15px 0;text-align: right;"></Page>
    </div>

    <dialog-modify :title="title" :dcId="dcId" v-model="modal" @cancel="handleModalCancel" @ok="handleModalOk"></dialog-modify>
  </div>
</template>

<script>
import qs from 'qs';
import { dateFormat, thousandsFormat } from '@/static/tools';
import dialogModify from './components/dialog-modify.vue';

export default {
  name: 'marketStatistics',
  data () {
    return {
      columns: [
        { title: this.$t('m.chaID'), key: 'dcId', align: 'center' },//'渠道ID'
        { title: this.$t('m.platName'), key: 'dcName', align: 'center' },//平台名称
        {
          title: this.$t('m.sjTime'),
          align: 'center',
          render: (h, params) => {
            const { upTime } = params.row;
            return h('span', upTime ? dateFormat(upTime, 'year') : '');
          }
        },
        {
          title: this.$t('m.xjTime'),
          align: 'center',
          render: (h, params) => {
            const { downTime } = params.row;
            return h('span', downTime ? dateFormat(downTime, 'year') : '');
          }
        },
        { title: this.$t('m.daPV'), key: 'accessNum', align: 'center' },//详情访问pv
        { title: this.$t('m.scPV'), key: 'applyNum', align: 'center' },//申请点击pv
        { title: this.$t('m.xaUV'), key: 'accessUv', align: 'center' },//详情访问uv
        { title: this.$t('m.scUV'), key: 'applyUv', align: 'center' },//申请点击uv
        { title: this.$t('m.subNum'), key: 'registerNum', align: 'center' },//注册数
        {
          title: this.$t('m.subRate'),//注册转化率
          align: 'center',
          render: (h, params) => {
            const { registerConvertRate } = params.row;
            return h('span', `${registerConvertRate * 1000000 / 10000}%`);
          }
        },
        {
          title: this.$t('m.chargeModel'),//收费模式
          align: 'center',
          render: (h, params) => {
            const { settleMode, settlePrice } = params.row;
            return h('span', `${settlePrice}/${settleMode}`);
          }
        },
        { title: this.$t('m.chOC'), key: 'settlePrice', align: 'center' },//收费单价
        {
          title: this.$t('m.chAM'),//
          align: 'center',
          render: (h, params) => {
            const { shouldReceiveAmount } = params.row;
            return h('span', thousandsFormat(shouldReceiveAmount));
          }
        },
        {
          title: this.$t('m.operate'),//操作
          align: 'center',
          render: (h, params) => {
            const { dcName, dcId } = params.row;

            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                on: {
                  click: () => {
                    this.handleSetting(dcName, dcId);
                  }
                }
              }, this.$t('m.setting'))//设置
            ]);
          }
        }
      ],
      list: [],
      total: 0,
      loading: true,
      status: 1,
      pickerValue: [],
      startDate: '',
      endDate: '',
      name: '',
      page: 1,
      pageSize: 10,
      title: '真是注册',
      modal: false,
      dcId: 0
    }
  },
  created () {
    this.getStatisticsList();
  },
  methods: {
    emptyQueryInfo () {
      this.name = ''
      this.status = ''
      this.startDate = ''
      this.endDate = ''
    },
    // 获取贷超列表
    getStatisticsList () {
      this.loading = false;
      this.$http.get(`/api/laocai/loan-market/stat?status=${this.status}&name=${this.name}&startDate=${this.startDate}&endDate=${this.endDate}&page=${this.page}&pageSize=${this.pageSize}`)
        // this.$http.get('/api/laocai/loan-market/stat')
        .then((Response) => {
          // this.list = Response.body.result.list
          if (Response.body.code == 0) {
            this.list = Response.body.result.list;
            this.total = Response.body.result.size;
          }
          this.loading = false;
        }, error => {
          console.log(error);
        });
    },
    // 设置
    handleSetting (name, dcId) {
      this.title = `${name}真实注册`;
      this.dcId = dcId;
      this.modal = true;
    },
    // cancel回调函数
    handleModalCancel () {
      this.modal = false;
    },
    // success回调函数
    handleModalOk () {
      this.getStatisticsList();
    },
    // 分页切换
    pageChange (val) {
      this.page = val;
      this.getStatisticsList();
    },
    // 每页显示数量
    handleSizeChange (val) {
      this.pageSize = val;
      this.getStatisticsList();
    },
    handlePicker (val) {
      this.selectValue = val;
      this.startDate = val[0];
      this.endDate = val[0];
    }
  },
  watch: {
  },
  components: {
    dialogModify
  }
}
</script>

<style lang="scss">
@import "../../static/style.css";
@import "../../static/common.scss";
.items {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 20px;
  width: 200px;

  .label {
    overflow: hidden;
    white-space: inherit;
    text-align: right;
    color: #222;
    font-size: 14px;
    margin-right: 10px;
  }
}
.market-wrapper {
  padding: 15px;

  .column-space {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  .iv-input {
    margin-right: 10px;
    width: 200px;
  }

  .btn-add {
    float: right;
  }
}

.market-main {
  margin-top: 15px;
}
</style>
